<template>
  <div>
    <!-- 单排商品 -->
    <div v-if="moduleName === 'goods1n'">
      <div class="goods-1n flex justify-strat align-center"
           v-for="(item,index) in list"
           :key="'goods1n_'+index"
           @click="jump(item)">
        <!-- 商品主图 -->
        <img v-lazy="item[goodsImg]"
             class="goods-1n-img"
             v-show="goodsImg !== ''">
        <!-- 商品信息 -->
        <div class="goods-info flex flex-direction justify-between">
          <!-- 商品名称 -->
          <div class="info-item ellipsis-1"
               v-show="goodsName !== ''">
            <span v-if="seckill && item[seckill]"
                  class="goods-name-tag">秒杀</span>
            <span>{{item[goodsName]}}</span>
          </div>
          <!-- 商品规格-->
          <div class="info-item ellipsis-1"
               v-show="goodsSpecs !== ''">
            {{item[goodsSpecs]}}
          </div>

          <!-- 价格信息 -->
          <div class="info-item flex justify-between align-center">
            <div>
              <span class="text-price goods-1n-price"
                    v-show="goodsPrice">{{item[goodsPrice]}}</span>
              <span class="del-price"
                    v-show="delPrice != ''">￥{{item[delPrice]}}</span>
            </div>
            <span class="text-number"
                  v-show="goodsNum !== ''">{{item[goodsNum]}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 双排商品 -->
    <div class="goods-2n-content justify-between flex flex-wrap"
         v-if="moduleName === 'goods2n'">
      <div class="goods-2n-item"
           v-for="(item,index) in list"
           :key="'goods_2n_'+index"
           @click="jump(item)">

        <!-- 商品主图 -->
        <img v-lazy="item[goodsImg]"
             class="goods-2n-img"
             alt="">
        <!-- 商品信息 -->
        <div class="goods-2n-info">
          <div class="goods-name floor ellipsis-1"
               v-show="goodsName != ''">
            <span v-if="seckill && item[seckill]"
                  class="goods-name-tag">秒杀</span>
            <span class="goods-name-span">{{item[goodsName]}}</span>
          </div>
          <!-- 商品信息 -->
          <div class="floor">
            <div class="flex justify-between align-center"
                 style="margin-bottom:5px;">
              <div class="goods-price text-price"
                   v-show="goodsPrice != ''">{{item[goodsPrice]}}</div>
              <div class="sale-num"
                   v-show="saleNum != ''">
                {{item[saleNum]}}人已购买
              </div>
              <div class="del-price"
                   v-show="delPrice != ''">
                ￥{{item[delPrice]}}
              </div>
              <div class="eshowBtn"
                   v-show="btnText != ''">
                {{item[btnText] || btnText}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsModule',
  methods: {
    jump(data) {
      this.$emit('clickGoods', data)
    }
  },
  props: {
    /**
     * 模块名称
     * goods1n  单排商品模块
     * goods2n  双排商品模块
     */
    moduleName: {
      type: String,
      default: 'goods1n'
    },
    /**
     * 商品列表
     */
    list: {
      type: Array,
      default() {
        return []
      }
    },
    /**
     * 商品图片对应的字段
     */
    goodsImg: {
      type: String,
      default: ''
    },
    /**
     * 商品图片对应的字段
     */
    goodsName: {
      type: String,
      default: ''
    },
    /**
     * 商品价格对应的字段
     */
    goodsPrice: {
      type: String,
      default: ''
    },
    /**
     * 商品价格对应的字段
     */
    delPrice: {
      type: String,
      default: ''
    },
    // /**
    //  * 是否显示左侧按钮
    //  */
    // showBtn: {
    //   type: Boolean,
    //   default: false
    // },
    /**
     * 点击按钮后触发的事件
     */
    clickBtn: {
      type: Function
    },
    /**
     * 按钮文字
     */
    btnText: {
      type: String,
      default: ''
    },
    /**
     * 商品ID对应的字段
     */
    goodsId: {
      type: String,
      default: 'goods_id'
    },
    /**
     * 商品规格
     */
    goodsSpecs: {
      type: String,
      default: ''
    },
    /**
     * 商品数量
     */
    goodsNum: {
      type: [String, Number],
      default: ''
    },
    /**
     * 商品售出数量
     */
    saleNum: {
      type: [String, Number],
      default: ''
    },
    /**
     * 商品售出数量
     */
    seckill: {
      type: [String, Number],
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
// 1n商品模块
.goods-1n {
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  &:active {
    background-color: #f9f9f9;
  }
  & + .goods-1n {
    position: relative;
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #eeeeee;
      transform: translateY(0.5);
      content: '';
    }
  }
  &:last-child {
    border-bottom: none;
  }
  .goods-1n-img {
    width: 90px;
    height: 90px;
    border-radius: 5px;
    margin-right: 10px;
  }
  .goods-info {
    width: 0;
    flex: 1;
    font-size: 14px;
    color: #333333;
    min-height: 90px;
    padding: 6px 0;
    .goods-1n-price {
      color: $mainColor;
      font-size: 18px;
    }
    .ellipsis-1 {
      white-space: normal;
    }
    .del-price {
      text-decoration: line-through;
      color: #666666;
      font-size: 12px;
      margin-left: 10px;
    }
  }
}

// 2n商品模块
.goods-2n-content {
  width: 100%;
  padding-bottom: -10px;
  .goods-2n-item {
    width: 49%;
    background-color: #ffffff;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
    &:active {
      background-color: #f9f9f9;
    }
    .goods-2n-img {
      width: 100%;
      height: 170px;
      margin: 0 auto;
    }
    .goods-2n-info {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      .floor {
        margin-bottom: 8px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .goods-name {
        color: #202020;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        display: -webkit-box !important;
        font-size: 12px !important;
        height: 32px;
        overflow: hidden;
      }

      .goods-price {
        color: $mainColor;
        font-size: 13px;
        font-weight: bold;
      }
      .sale-num {
        font-size: 12px;
        color: #666666;
      }

      .del-price {
        text-decoration: line-through;
        color: #666666;
        font-size: 11px;
      }

      .eshowBtn {
        padding: 0px 10px;
        height: 24px;
        line-height: 22px;
        color: $mainColor;
        border: 1px solid $mainColor;
        border-radius: 12px;
        display: block;
      }
    }
  }
}

// 秒杀标签
.goods-name-tag {
  font-size: 12px;
  color: #ffffff;
  background: linear-gradient(180deg, #fc6919 0%, #fa4116 100%);
  max-width: 32px;
  text-align: center;
  max-height: 15px;
  line-height: 15px;
  font-weight: normal;
  padding: 0 5px;
  border-radius: 7.5px;
  margin-right: 5px;
}
</style>
